// 引入封装的ajax请求 http
// import http from '../../utils/http'
import http from '../../utils/http';
import { useState, useEffect } from 'react';


import './oldMan.less';
import { Layout, Menu, Input, Select, Button, Table, Image, Space,DatePicker } from 'antd';
import Head from '../../components/header';

//  导出 添加 的 组件  
import Add from './add/Add';
const { Sider, Content } = Layout;
const { Option } = Select;



const columns = [
  {
    title: '登记时间',
    dataIndex: 'registrationTime',
    key: 'registrationTime',
    width: 180,

  },
  {
    title: 'ID',
    dataIndex: 'userID',
    key: 'userID',
  },
  {
    title: '近照',
    dataIndex: 'photoUrl',
    key: 'photoUrl',
    render: (photoUrl) => {
      return (
        <Image
          width={50}
          src={photoUrl}
        />
      )
    }
  },
  {
    title: '姓名',
    dataIndex: 'userName',
    key: 'userName',

  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '合同有效期至',
    dataIndex: 'contractEnd',
    key: 'contractEnd',
  },
  {
    title: '状态',
    dataIndex: 'contractState',
    key: 'contractState',
  },
  {
    title: '操作',
    key: 'action',
    render: (text, record) => (
      <Space size="middle">
        <a>查看</a>
        <a>编辑</a>
        <a>停止服务</a>
        <a>合同</a>
        <a>删除</a>
      </Space>
    ),
  },
];

const data = [
  {
    key: '1',
    registrationTime: '2012-11-11 13:01:01',
    userID: 'ZD0024',
    photoUrl: 'http://ww1.sinaimg.cn/large/007iaMVvgy1gtcvb2krjzj308c0aiq3q.jpg',
    userName: '王晓',
    phone: '12354862457',
    contractEnd: '2022-11-11 13:01:01',
    contractState: '服务中'
  },
  {
    key: '2',
    registrationTime: '2012-11-11 13:01:01',
    userID: 'ZD0024',
    photoUrl: 'http://ww1.sinaimg.cn/large/007iaMVvgy1gtcvb2krjzj308c0aiq3q.jpg',
    userName: '王晓',
    phone: '12354862457',
    contractEnd: '2022-11-11 13:01:01',
    contractState: '服务中'
  }


];

function OldManManege() {

  useEffect(() => {

      http({
          url: '/olderly/all',
      }).then((res) => {
          console.log(res.data);
          

      })


  },[]);
  // 登记时间的函数
  function onChange(date, dateString) {
    console.log(date, dateString);
  }

 const hhh = () => {

      http({
        url: '/olderly/all',
        method:'get'
    }).then((res) => {
        console.log(res.data.data);
    })

  }

  return (

    <div className='oldMan'>
    <Layout>
      <Head />
      <Content>
      <div className="olderly">
        <Layout>
          <Sider>
            <Menu
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              mode="inline"
              theme="dark"
            >
              <Menu.Item key="1" >
                老人管理
              </Menu.Item>
            </Menu>
          </Sider>
          <Content>
            <div className="contents">
            <div className="tilteName">老人管理</div>
            <div className="oldcon">
              <div className="conditions">
                <div className="list time">
                  <span>登记时间</span>
                  <Space direction="vertical" className="style">
                    <DatePicker onChange={onChange} style={{height:30}}/>
                  </Space>
                </div>

                <div className="list userID">
                  <span>ID</span>
                  <Input placeholder="请输入ID" />
                </div>

                <div className="list userName">
                  <span >姓名</span>
                  <Input placeholder="请输入姓名" />
                </div>

                <div className="list idCard">
                  <span >身份证</span>
                  <Input placeholder="请输入身份证" />
                </div>

                <div className="list phone">
                  <span >电话</span>
                  <Input placeholder="请输入电话" />
                </div>

                <div className="list state">
                  <span >状态</span>
                  <Select
                    placeholder="请选择"
                    allowClear  
                    style={{width:"100px"}}
                  >
                    <Option value="male">禁用</Option>
                    <Option value="female">启用</Option>
                  </Select>
                </div>

                <div  className="list sure" >
                  <Button type="primary">筛选</Button>
                </div>

                <div className="list excel">
                  <Button type="primary" onClick={hhh}>Excel导出</Button>
                </div>
              </div>
              <div className="addOlderly">
                <div className="inforAdd">
                  {/* <Button type="primary" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} >添加</Button> */}
                  <Add></Add>
                </div>
              </div>

            </div>

            <div className="tablebox">
              <Table columns={columns} dataSource={data} />
            </div>
            </div>
          
          </Content>
        </Layout>

      </div>

      </Content>
   
    </Layout>
    </div>
  )
}
export default OldManManege;